<template>
  <div class="app-container-page">
    <div class="fullCalendarContent">
      <FullCalendar id="calendar" ref="myfullCalendar" class="demo-app-calendar" :options="calendarOptions">
        <template v-slot:dayCellContent="arg">
          {{ arg.dayNumberText.slice(0,arg.dayNumberText.length - 1) }}
        </template>
        <template v-slot:eventContent="arg">
          <div class="YT_FC_BASE">
            <Icon type="md-calendar" @click="showSchedule(arg)" style="color: rgb(25, 190, 107); visibility: visible;"/>
            <div>
              <span>德州城市花园摄影基地</span>
              <span style="color: rgb(170, 170, 170);margin-left: 8px;">7.5/8</span>
            </div>
            <p class="note light" style="color: rgb(204, 204, 204);">苗苗休卓雅休  小南休 南林休 指定璇璇 指定双双    顾客9点到</p>
          </div>
        </template>
      </FullCalendar>
    </div>
    <Modal v-model="modal" draggable scrollable :mask="false" class-name="paikongModl" :title="title">
      <Divider plain orientation="left">已自定义档期基地</Divider>
      <vxe-table
        border
        show-overflow
        :edit-config="editConfig"
        :data="tableData">
        <vxe-column field="name" title="基地/景区" width="200"></vxe-column>
        <vxe-column field="count" title="排档数" width="100" :edit-render="{name: 'input'}"></vxe-column>
        <vxe-column field="remark" title="备注" :edit-render="{name: 'input'}"></vxe-column>
        <vxe-column title="操作" width="160">
          <template #default="{ row }">
            <Tooltip content="更新">
              <Button size="small" icon="md-checkmark-circle-outline"></Button>
            </Tooltip>
            <Tooltip content="移除">
              <Button size="small" icon="md-log-out"></Button>
            </Tooltip>
          </template>
        </vxe-column>
      </vxe-table>
      <div slot="footer">
        <Button type="text" @click="cancel">关闭</Button>
      </div>
    </Modal>
  </div>
</template>

<script>
  import FullCalendar from '@fullcalendar/vue';
  import dayGridPlugin from '@fullcalendar/daygrid';
  import timeGridPlugin from '@fullcalendar/timegrid';
  import listPlugin from '@fullcalendar/list';
  import interactionPlugin from '@fullcalendar/interaction';
  export default {
    name: 'OrderIndex',
    components: {
      FullCalendar
    },
    data() {
      return {
        modal: false,
        title: '',
        tableData: [
          { id: 10001, name: '德州城市花园摄影基地', count: 10, age: 28, remark: '不安排双双 璇璇 海洋 钟辉  顾客9点到   欣欣阿浩休' },
        ],
        editConfig: {
          trigger: 'click',
          mode: 'cell'
        },
        calendarOptions: {
          locale: 'zh',
          plugins: [dayGridPlugin, timeGridPlugin, listPlugin, interactionPlugin],
          initialView: 'dayGridMonth',
          firstDay: 1,
          headerToolbar: {
            left: '',
            center: 'prev title next',
            right: ''
          },
          buttonText: {
            prev: '<',
            next: '>',
          },
          // eventClick: this.handleEventClick,
          dateClick: this.handleDateClick,
          contentHeight: '78vh',
          events: [
            { start: '2024-12-01' },
            { start: '2024-12-02' },
            { start: '2024-12-03' },
            { start: '2024-12-04' },
            { start: '2024-12-05' },
            { start: '2024-12-06' },
            { start: '2024-12-07' },
            { start: '2024-12-08' },
            { start: '2024-12-09' },
            { start: '2024-12-10' },
            { start: '2024-12-11' },
            { start: '2024-12-12' },
            { start: '2024-12-13' },
            { start: '2024-12-14' },
            { start: '2024-12-15' },
            { start: '2024-12-16' },
            { start: '2024-12-17' },
            { start: '2024-12-18' },
            { start: '2024-12-19' },
            { start: '2024-12-20' },
            { start: '2024-12-21' },
            { start: '2024-12-22' },
            { start: '2024-12-23' },
            { start: '2024-12-24' },
            { start: '2024-12-25' },
            { start: '2024-12-26' },
            { start: '2024-12-27' },
            { start: '2024-12-28' },
            { start: '2024-12-29' },
            { start: '2024-12-30' },
            { start: '2024-12-31' },
          ]
        },
      }
    },
    mounted() {
    },
    methods: {
      showSchedule(arg) {
        console.log(arg);
        this.title = arg.event.startStr + '自定义档期';
        this.modal = true
      },
      cancel() {
        this.modal = false;
      },
      handleDateClick(info) {
        console.log(info);
      },
      handleEventClick(info) {
        console.log(info);
        this.title = info.event.startStr;
        this.modal = true
      }
    }
  }
</script>
<style scoped lang="less">
  .app-container-page {
    padding-top: 40px;
  }
  .YT_FC_BASE {
      color: rgba(65,80,88,.7);
      margin-top: 12px;
      font-size: 10px;
  }
  .YT_FC_BASE>div {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-align: center;
      -ms-flex-align: center;
      align-items: center;
      padding: 3px 5px
  }
  .YT_FC_BASE>i {
      position: absolute;
      top: 5px;
      right: 5px;
      font-size: 16px;
      visibility: hidden
  }
  .YT_FC_BASE i:hover {
      -webkit-transform: scale(1.1);
      transform: scale(1.1);
      color: #415058!important
  }
  .fc-day:hover .YT_FC_BASE {
      color: #415058
  }
  .YT_FC_BASE>div span:first-child {
      -webkit-box-flex: 0;
      -ms-flex: none;
      flex: none;
      // width: 50%;
      text-overflow: ellipsis;
      white-space: nowrap;
      overflow: hidden
  }

  .CONTROL_BASE .YT_FC_BASE>div span:last-child {
      margin-left: auto
  }
  .YT_FC_BASE .note {
      margin-top: auto;
      padding: 3px 5px;
      word-break: break-word;
      white-space: pre-wrap
  }
  .fullCalendarContent {
    height: 100%;
    padding-top: 20px;
    background-color: #fff;
  }
</style>
